<template>
	<view class="pay">
		<text class="pay-title">请选择支付方式</text>
		<view class="pay-tabs">
			<view class="pay-type" v-for="(item, index) in type" :key="index"
				:class="{'pay-type-active': tabIndex == index}" @click="tabIndex = index">
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="price-box">
			<view class="price-item">
				<view class="price-up">
					<view class="coin">
						<text class="coin-text">¥</text>
					</view>
					<text class="coin-title">应收金额（元）</text>
				</view>
				<text class="price-text">¥ {{price}}</text>
			</view>
			<view class="price-item">
				<view class="price-up">
					<view class="coin">
						<text class="coin-text">¥</text>
					</view>
					<text class="coin-title">折后金额（元）</text>
				</view>
				<text class="price-text">¥ {{priceEnd}}</text>
			</view>
		</view>
		<view class="input-box">
			<input v-model="orderId" type="text" class="input" placeholder="订单号" :disabled="true" />
			<input type="text" class="input" placeholder="请输入折扣" />
			<view class="process-box">
				<image class="process-icon" src="../../static/pay-process.png" mode="widthFix"></image>
				<view class="process-text-box">
					<view class="process-text-item">
						<text class="process-name">打开付款码</text>
						<text class="process-des">个人中心身份码</text>
					</view>
					<view class="process-text-item">
						<text class="process-name">贴合付款盒子</text>
						<text class="process-des">等待完成支付</text>
					</view>
					<view class="process-text-item">
						<text class="process-name">确认收款</text>
						<text class="process-des">收银台点击确认</text>
					</view>
				</view>
			</view>
		</view>
		<view class="user-info" v-if="tabIndex == 2">
			<text class="user-info-text">昵称: 用户1234</text>
			<text class="user-info-text">手机号: 12345678987</text>
			<text class="user-info-text">员工卡余额: ¥500.00</text>
		</view>
		<view class="user-info" v-else-if="tabIndex == 3">
			<text class="user-info-text">昵称: 用户1234</text>
			<text class="user-info-text">手机号: 12345678987</text>
			<text class="user-info-text">会员卡余额: ¥500.00</text>
		</view>
		<view class="user-info" v-else></view>
		<view class="confirm" @click="CreateOrder()">
			<text>创建订单</text>
		</view>
		<input @confirm="pay()" v-model="qrResult" ref="codeInput" type="text" style="opacity: 0;" />
		<view class="return" @click="back()">
			<image class="return-icon" src="../../static/return.svg" mode="aspectFit"></image>
		</view>
		<view class="qr-box" v-if="showQrVideo">
			<qrcode-stream @detect="onDetect"></qrcode-stream>
			<view class="around">
				<view class="around-in" v-for="i in 4" :key="i"></view>
			</view>
			<view class="qr-close" @click="showQrVideo = false">
				<image class="qr-close-icon" src="../../static/close.svg" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import { QrcodeStream } from 'vue-qrcode-reader'
	export default {
		components: {
			QrcodeStream
		},
		data() {
			return {
				price: 0,
				priceEnd: 0,
				orderId: '',
				type: [{
						name: '微信',
						paytype: 'weixin'
					},
					{
						name: '支付宝',
						paytype: 'alipay'
					},
					{
						name: '员工卡',
						paytype: 'yuangong'
					},
					{
						name: '会员卡',
						paytype: 'huiyuan'
					}
				],
				tabIndex: 0,
				showQrVideo: false,
				qrResult: ''
			}
		},
		onLoad() {
			this.price = uni.cartPage.priceTotal
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			CreateOrder() {
				uni.showLoading({
					title: '订单生成中',
					mask: true
				})
				this.$api.createOrder({
					shopId: uni.getStorageSync('info').shopId,
					mobile: '',
					orderType: 'takein',
					remark: '',
					gettime: 0,
					productId: uni.cartPage.cartList.map(item => item.productId),
					spec: uni.cartPage.cartList.map(item => item.sku),
					number: uni.cartPage.cartList.map(item => item.cartNum),
					payType: this.type[this.tabIndex].paytype,
					deskId: 0,
					deskNumber: '',
					deskPeople: 0,
					uid: 0,
					cartIds: uni.cartPage.cartList.map(item => item.id),
					pack: 0
				}).then(res => {
					uni.hideLoading()
					let { code, data, msg } = res.data
					if (code == 0) {
						this.orderId = data.orderId
						this.startPay()
					} else {
						uni.showToast({
							title: msg,
							icon: 'none',
							duration: 2500
						})
					}
				})
			},
			startPay() {
				uni.showLoading({
					title: '等待扫码',
					mask: true
				})
				this.$refs.codeInput.$el.querySelector('input').focus()
				/* return
				this.qrResult = ''
				this.showQrVideo = true
				return
				if (this.tabIndex == 0 || this.tabIndex == 1) {
					this.showQrVideo = true
				} else {
					this.pay()
				} */
			},
			pay() {
				this.$api.pay({
					from: 'scan',
					paytype: this.type[this.tabIndex].paytype,
					uni: this.orderId,
					uid: 0,
					authCode: this.qrResult
				}).then(res => {
					let { code, msg, data } = res.data
					if (code == 0) {
						setTimeout(() => {
							uni.showToast({
								title: '支付成功',
								icon: 'success',
								duration: 1500
							})
						}, 1500)
					} else {
						setTimeout(() => {
							uni.showToast({
								title: '扫码失败',
								icon: 'error',
								duration: 1500
							})
						}, 1500)
					}
					uni.navigateBack()
				})
			},
			onDetect(detectedCodes) {
				const target = detectedCodes[0]
				if (target && target.rawValue) {
					this.qrResult = target.rawValue
					this.showQrVideo = false
					this.pay()
				}
			}
		}
	}
</script>

<style scoped>
	.pay {
		display: flex;
		flex-direction: column;
	}

	.pay-title {
		font-size: calc(var(--base) * 22);
		font-weight: bold;
		color: #333;
		padding: 20px;
	}

	.pay-tabs {
		align-items: center;
		justify-content: center;
		display: flex;
		flex-direction: row;
		padding-bottom: 32px;
		border-bottom: 2px dashed #f3f4f5;
		--radius: calc(var(--base) * 21);
	}

	.pay-type {
		width: calc(var(--base) * 150);
		height: calc(var(--base) * 42);
		box-sizing: border-box;
		border: 1px solid #1890ff;
		border-right: none;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333;
		font-size: calc(var(--base) * 16);
	}

	.pay-type-active {
		background: #1890ff;
		color: #fff;
	}

	.pay-type:nth-child(1) {
		border-top-left-radius: var(--radius);
		border-bottom-left-radius: var(--radius);
	}

	.pay-type:nth-last-child(1) {
		border-right: 1px solid #1890ff;
		border-top-right-radius: var(--radius);
		border-bottom-right-radius: var(--radius);
	}

	.price-box {
		display: flex;
		flex-direction: row;
		height: calc(var(--base) * 140);
		padding: 0 50px;
	}

	.price-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-right: 1px dashed #f3f4f5;
	}

	.price-up {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.coin {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(var(--base) * 28);
		height: calc(var(--base) * 28);
	}

	.coin::before {
		content: '';
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background: linear-gradient(to right bottom, #ffd96b 50%, #fdc223 50%);
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.coin::after {
		content: '';
		width: calc(100% * 20 / 28);
		height: calc(100% * 20 / 28);
		border-radius: 50%;
		background: linear-gradient(to right bottom, #f9b721 50%, #f9ab10 50%);
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
	}

	.coin-text {
		font-size: calc(var(--base) * 14);
		font-weight: bold;
		color: #bf790a;
		position: relative;
		z-index: 2;
	}

	.coin-title {
		font-size: calc(var(--base) * 16);
		color: #333;
		padding-left: calc(var(--base) * 12);
	}

	.price-text {
		font-size: calc(var(--base) * 24);
		font-weight: bold;
		color: #333;
		padding-top: calc(var(--base) * 24);
	}

	.price-item:last-child .price-text {
		color: #f00;
	}

	.input-box {
		padding: 0 50px;
		display: flex;
		flex-direction: column;
	}

	.input {
		font-size: calc(var(--base) * 16);
		border: 1px solid #1890ff;
		border-radius: calc(var(--base) * 12);
		padding: calc(var(--base) * 16);
		margin-bottom: calc(var(--base) * 20);
	}

	.process-box {
		display: flex;
		flex-direction: column;
		border: 1px dashed #cbcbcb;
		border-radius: calc(var(--base) * 16);
	}

	.process-icon {
		width: 100%;
		padding-top: calc(var(--base) * 30);
	}

	.process-text-box {
		height: calc(var(--base) * 92);
		display: flex;
		flex-direction: row;
	}

	.process-text-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
	}

	.process-name {
		font-size: calc(var(--base) * 16);
		font-weight: bold;
		color: #333;
	}

	.process-des {
		font-size: calc(var(--base) * 14);
		color: #333;
		padding-top: calc(var(--base) * 14);
	}

	.user-info {
		opacity: 0;
		height: calc(var(--base) * 76);
		display: flex;
		flex-direction: row;
		padding: 0 50px;
		margin-top: 20px;
		font-size: calc(var(--base) * 18);
		color: #989898;
	}

	.user-info-text {
		padding-right: calc(var(--base) * 56);
	}

	.confirm {
		align-self: center;
		width: calc(100% - (138px * 2));
		height: calc(var(--base) * 53);
		background: #1890ff;
		border-radius: calc(var(--base) * (53 / 2));
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: calc(var(--base) * 18);
		font-weight: bold;
		color: #fff;
	}

	.return {
		position: fixed;
		bottom: 24px;
		right: 24px;
		z-index: 9999;
		width: calc(var(--base) * 50);
		height: calc(var(--base) * 50);
		background: #4b83f0;
		border-radius: calc(var(--base) * (50 / 2));
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.return-icon {
		width: calc(var(--base) * 26);
		height: calc(var(--base) * 26);
	}

	.qr-box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #000;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}
	
	.around {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		--around-l: calc(var(--base) * 380);
		--animation-h: calc(var(--around-l) * 0.16);
		width: var(--around-l);
		height: var(--around-l);
	}
	
	@keyframes scanning {
	    100% {
			transform: translate(
				0,
				calc(var(--around-l) - var(--animation-h))
			);
		}
	}
	
	.around::after {
		display: flex;
		content: '';
		width: 100%;
		height: var(--animation-h);
		background-image: linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0),
			rgba(255, 255, 255, .2)
		);
		animation: scanning 1.5s linear infinite;
	}
	
	.around-in {
		--process: 80%;
		--process-: calc(100% - var(--process));
		width: 30%;
		height: 30%;
		position: absolute;
		border: 6px solid rgba(255, 255, 255, .5);
		border-radius: calc(var(--base) * 10);
	}
	
	.around-in:nth-child(1) {
		top: 0;
		left: 0;
		border-right: none;
		border-bottom: none;
		clip-path: polygon(
			0 0,
			var(--process) 0,
			var(--process) var(--process),
			0 var(--process)
		);
	}
	
	.around-in:nth-child(2) {
		top: 0;
		right: 0;
		border-left: none;
		border-bottom: none;
		clip-path: polygon(
			100% 0,
			100% var(--process),
			var(--process-) var(--process),
			var(--process-) 0
		);
	}
	
	.around-in:nth-child(3) {
		bottom: 0;
		left: 0;
		border-top: none;
		border-right: none;
		clip-path: polygon(
			0 100%,
			0 var(--process-),
			var(--process) var(--process-),
			var(--process) 100%
		);
	}
	
	.around-in:nth-child(4) {
		bottom: 0;
		right: 0;
		border-top: none;
		border-left: none;
		clip-path: polygon(
			100% 100%,
			100% var(--process-),
			var(--process-) var(--process-),
			var(--process-) 100%
		);
	}

	.qr-close {
		--size: calc(var(--base) * 46);
		width: var(--size);
		height: var(--size);
		position: absolute;
		top: 10px;
		left: 10px;
		background: rgba(0, 0, 0, .5);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: calc(var(--size) / 2);
		cursor: pointer;
	}

	.qr-close-icon {
		width: 50%;
		height: 50%;
	}
</style>